<!DOCTYPE HTML>
<html>
	<head>
		<style type="text/css">
            #box{
            	width:200px;height:100px;border:1px solid #ccc;float: left;
            }
            body{
            	font-size:70%;margin:20px 20px;font-family:verdana,helvetica,arial,sans-serif;
            }
		</style>
		<script type="text/javascript">
		    //获取坐标
            function getCoordinates(event){
                x = event.clientX;
                y = event.clientY;
                document.getElementById("coordinates").innerHTML = "Coordinates: ("+ x +","+ y +")";
            }

            // 清除坐标
            function clearCoordinates(){
            	document.getElementById("coordinates").innerHTML = "";
            }

		</script>
	</head>
	<body>

	    <p>把鼠标悬停在下面的矩形上可以看见坐标：</p>
	    <div id="box" onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()"></div>
	    <br />
	    <br />
	    <br />
	    <div id="coordinates"></div>
		
	</body>
</html>

  